/**
 * Created by ste on 2018/1/9.
 */
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from 'react-native';
import Circle from './Circle';

const styles = StyleSheet.create({
  root: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 50,
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: '#f5f5f5',
    backgroundColor: 'white',
  },
  leftView: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 10,
  },
  rightView: {
    backgroundColor: 'red',
    paddingHorizontal: 20, // 水平间距
    height: 50,
    justifyContent: 'center',
  },
  rightText: {
    fontSize: 18,
    color: '#fff',
  },
});

export default class Footer extends Component {

  render() {
    return (
      <View style={styles.root}>
        <View style={styles.leftView}>
          <Circle />
          <Text style={{ left: 5 }}>全选</Text>
        </View>
        <Text >总计:  $100</Text>
        <TouchableOpacity>
        <View style={styles.rightView}>
          <Text style={styles.rightText}>去结算(0)</Text>
        </View>
        </TouchableOpacity>
      </View>
    );
  }
}
